<template>
  <div>
    <debug-reduce></debug-reduce>
    <p>当前count：{{$store.state.count}}</p>
    <p>{{$store.getters.currentCount}}</p>
    <p>count + 2：{{newCount}}</p>
    <debug-plus></debug-plus>
    <hr>
    <router-link to="message">message</router-link>
    <hr>
    <hello></hello>
    <hr>
    <button @click="getRequest">GET</button>
    <button @click="postRequest">POST</button>
    <button @click="jump('methods')">Methods</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import plus from '@/components/storeAssembly/plus.vue';
import reduce from '@/components/storeAssembly/reduce.vue';

// 组件懒加载
const hello = () => import('@/components/helloWorld');

export default {
  data() {
    return {
      tit: 'index',
    };
  },
  computed: {
    ...mapState(['count']),
    newCount() {
      return this.count + 2;
    },
  },
  components: {
    'debug-plus': plus, // 重命名
    'debug-reduce': reduce,
    hello, // hello: resolve => require(['@/components/helloWorld'], resolve)  异步写法
  },
  created() {
    // this.temp().then((res) => console.log(res));
  },
  methods: {
    async temp() {
      await this.log(3000);
      await this.log(2000);
      let str = await this.log(1000);
      console.log('str', str);
      this.log(1500).then((res) => console.log('77777', res));
      console.log(11);
      return { id: '1' };
    },
    log(time) {
      // 定义一个或多个普通函数，函数必须返回Promise对象，如果返回其他类型的数据，将按照普通同步程序处理
      return new Promise((resolve, reject) => {
        try {
          setTimeout(function () {
            console.log(time);
            resolve('Clearlove');
          }, time);
        } catch (error) {
          reject(error);
        }
      });
    },
    getRequest() {
      this.$axios
        .get('https://api.apiopen.top/singlePoetry')
        .then((res) => console.log(res));
    },
    postRequest() {
      this.$axios
        .post('/api/user/logout', {
          mobile: '15153131518',
        })
        .then((res) => console.log(res));
    },
    jump(path) {
      this.$router.push({
        name: path,
        params: {
          id: 1,
          name: 'zs',
        },
      });
    },
  },
};
</script>

<style lang="scss">
</style>
